﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>指定子元素的垂直对齐方式</title>
<style type="text/css">
#layout {
	height: 300px;
	width: 700px;
	margin-top: 30px;
	padding: 10px;
	border: 1px solid #930;
	display: box;
	display: -moz-box;
	display: -webkit-box;
	box-align: center;
	-moz-box-align: center;
	-webkit-box-align: center;
}
#test1 {
	height: 100px;
	width: 200px;
	color: #360;
	background-image: url(img/BG06.gif);
}
#test2 {
	height: 150px;
	width: 100px;
	color: #00F;
	background-image: url(img/BG07.gif);
}
#test3 {
	height: 200px;
	width: 250px;
	color: #F00;
	background-image: url(img/BG08.gif);
}
#test4 {
	height: 250px;
	width: 150px;
	color: #F60;
	background-image: url(img/BG09.gif);
}
</style>
</head>
<body>
<div id="layout">
	<div id="test1">DIV块 test1</div>
	<div id="test2">DIV块 test2</div>
	<div id="test3">DIV块 test3</div>
	<div id="test4">DIV块 test4</div>
</div>
</body>
</html> 



